<template>
	<view class="management_case">
		<view class="manage_box">
			<!-- 案件位置 -->
			<view v-if="current_handing_type == 1 || current_handing_type == 2" class="uni-banner">
				<view class="uni-banner-con">案件位置：</view>
				<view class="uni-banner-Description">
					<view class="uni-banner-par">
						<input
							class="search-antext"
							type="text"
							placeholder="请输入或点击定位图标获取位置信息"
							v-model="currentAddress"/>
					</view>
					<view class="uni-header-icon" @click="getCurretAddress">
						<image src="../../static/images/bg_03.png" mode=""></image>
					</view>
				</view>

			</view>

			<!-- 案件描述 -->
			<view class="uni-banner">
				<view class="uni-banner-con">案件描述：</view>
				<view class="uni-banner-Description">
					<textarea
						type="text"
						v-model="eventDescribe"
						maxlength="250"
						placeholder="请输入案件描述" />
					<P style="color: #A40000; font-size: 24rpx; ">*描述字数限制250字，剩余字数{{eventDescribe.length}}/250</P>
				</view>
			</view>

			<!-- 相机 -->
			<view class="uni-Camera">
				<view class="uni-Camera-zero" @click="takePictures">
					<image src="../../static/images/shangbao_22.png" mode=""></image>
				</view>
			</view>
			<view class="uni-form-item uni-column" v-if="imagesArr && imagesArr.length > 0">
				<view class="item-value-camera">
					<view class="image-box" v-for="(item, index) in imagesArr" :key="index">
						<image class="selectImg" :src="item" mode="aspectFit" alt="" @click="showImage(item)">
							<i class="closeImg" @click="deleteImg(index)"></i>
					</view>
				</view>
			</view>

			<P style="color: #A40000; font-size: 24rpx;margin-top: 20rpx; ">*请在拍照时，确保事件的环境位置关系与拍摄全景，如一张照片无法表现时，可拍摄多张！
			</P>

			<!-- 机构处置人员处置 -->
			<view class="uni-report" @click="showAlert(2)" v-if="current_handing_type != '6'">
				<view>提交</view>
			</view>
		</view>

		<!-- 监理审核 -->
		<view class="pending_buttons" v-if="current_handing_type == '6'">
			<button type="default" @click="showAlert(0)">驳 回</button>
			<button type="default" @click="showAlert(1)">回 转</button>
		</view>
	</view>
</template>

<script>
	// import {
	// 	appEventDeal,
	// 	updateSuperviseOfEvent
	// } from '@/api/pending_cases.js'
	import globalTime from '../../common/getTimeqj.js'
	export default {
		data() {
			return {
				//用户登录信息
				userInfo: uni.getStorageSync('userInfor'),
				imagesArr: [],

				eventId: '',
				//案件的坐标
				gdx: '',
				gdy: '',
				//案件描述
				eventDescribe: '',
				//案件图片
				paramsImages: [],
				//当前处置人员位置
				currentx: '',
				currenty: '',
				currentAddress: '',
				//判断当前是从哪进的
				current_handing_type: ''
			}
		},
		onLoad(options) {
			//判断当前是从哪进的
			this.current_handing_type = options.current_handing_type;

			this.currentAddress = '';
			//案件位置
			this.eventId = options.eventId;
			this.gdx = options.gdx;
			this.gdy = options.gdy;

			// 修改页面标题
			if (this.current_handing_type == 1) {
				uni.setNavigationBarTitle({
					title: '案件核实'
				});
			} else if (this.current_handing_type == 2) {
				uni.setNavigationBarTitle({
					title: '案件核查'
				});
			} else if (this.current_handing_type == 3) {
				uni.setNavigationBarTitle({
					title: '案件回退'
				});
			}else if (this.current_handing_type == 4) {
				uni.setNavigationBarTitle({
					title: '案件处置'
				});
			}

		},
		onShow() {
			//处置人员当前位置信息
			let currentLocation = uni.getStorageSync('currentLocation');
			this.currentx = currentLocation.currentx;
			this.currenty = currentLocation.currenty;
			this.currentAddress = currentLocation.currentAddress;
		},
		methods: {
			//提交
			showAlert(type) {
				if (this.current_handing_type == 1 || this.current_handing_type == 6) {
					if (this.currentAddress == '' || this.currentAddress == undefined) {
						this.$tip.toast('请获取定位');
						return;
					}
				}
				if (this.current_handing_type == 1 || this.current_handing_type == 3 || this.current_handing_type == 6) {
					if (this.paramsImages.length == 0) {
						this.$tip.toast('请选择图片或进行拍照');
						return;
					}
				}

				let _this = this,
					options = {},
					url = null;
				var images = JSON.stringify(this.paramsImages);
				if (this.current_handing_type == 6) {
					url = updateSuperviseOfEvent;
					options = {
						eventReportPhone: _this.userInfo.phonenumber, //上报电话
						eventReportName: _this.userInfo.nickName, //上报人姓名
						createUser: _this.userInfo.userId,
						eventAddress: _this.currentAddress, //详细地址
						remark: _this.eventDescribe, //处置描述
						eventId: _this.eventId,
						params: {
							images: images, //处理前照片
							operationType: type
						},
						gdx: _this.gdx, //定位坐标
						gdy: _this.gdy
					}
				} else {
					url = appEventDeal;
					options = {
						eventReportPhone: _this.userInfo.phonenumber, //上报电话
						eventReportName: _this.userInfo.nickName, //上报人姓名
						createUser: _this.userInfo.userId,
						eventAddress: _this.currentAddress, //详细地址
						remark: _this.eventDescribe, //处置描述
						eventId: _this.eventId,
						params: {
							images: images, //处理前照片
							isBack: _this.current_handing_type - 1 //0-处置，1-回退,2-特殊情况
						},
						gdx: _this.gdx, //定位坐标
						gdy: _this.gdy
					}
				}
				uni.showLoading();
				url(options).then((res) => {
					uni.hideLoading();
					if (res.code === 200) {
						this.$tip.toast('提交成功', () => {
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/detailPage/detailPage"
								})
							}, 1000)
						});
					} else {
						this.$tip.toast(res.msg);
					}
				}).catch((error) => {
					uni.hideLoading();
				})
			},
			//显示案件位置和自己的位置，并把自己当前的位置移到案件位置周围
			getCurretAddress() {
				uni.navigateTo({
					url: '/pages/detailPage/pendingCaseMap?gdx=' + this.gdx + '&gdy=' + this.gdy + '&mtype=2'
				})
			},
			//调手机相册或相机
			takePictures() {
				let _this = this;
				// 选择图片
				uni.chooseImage({
					count: 100, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'],
					success: function(res) {
						res.tempFilePaths.forEach(item => {
							_this.imagesArr.push(item);
							globalTime.detailImage(res.tempFilePaths[0],(data) => {
								//base64 图片内容就是  data
								//截取base64前面的字符串
								let index = data.indexOf(",")
								data = data.substring(index + 1);
								
								_that.paramsImages.push({
									"image": data
								});
							})
						});
					}
				});
			},
			//点击图片放大
			showImage(item) {
				let _this = this;
				uni.previewImage({
					urls: _this.imagesArr,
					current: item,
					longPressActions: {
						//itemList: ['发送给朋友', '保存图片', '收藏'],//按钮的文字数组
						success: function(data) {},
						fail: function(err) {}
					}
				});
			},
			// 删除本地图片：未上传
			deleteImg(index) {
				this.imagesArr.splice(index, 1);
				this.paramsImages.splice(index, 1);
			},
		}
	}
</script>

<style lang="scss">
	.management_case {
		height: calc(100% - 48rpx);
		margin: 0 auto;
		background: #fff;

		.manage_box {
			height: calc(100% - 120rpx);
			padding: 46rpx;
		}

		.uni-banner {
			width: 100%;
			margin-top: 10rpx;
			position: relative;
			display: flex;
			margin-bottom: 30rpx;

			.uni-banner-con {
				height: 60rpx;
			}

			.search-antext {
				border: 2rpx solid #ccc;
				height: 60rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				padding-left: 10rpx;
				padding-right: 80rpx;
			}

			/deep/.uni-input-input {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.uni-header-icon {
				width: 72rpx;
				height: 56rpx;
				position: absolute;
				top: 4rpx;
				right: -12rpx;

				image {
					width: 18px;
					height: 20px;
					margin-top: 4px;
				}
			}

			.uni-banner-Description {
				width: calc(100% - 140rpx);

				textarea {
					width: calc(100% - 24rpx);
					height: 200rpx;
					border: 2rpx solid #ccc;
					border-radius: 10rpx;
					font-size: 28rpx;
					padding: 0 10rpx;
				}
			}
		}

		.uni-Camera {
			width: 100%;
			display: flex;
			justify-content: center;

			.uni-Camera-zero {
				width: 145rpx;
				height: 145rpx;
				background-color: #E5E5E5;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 88rpx;
					height: 88rpx;
				}
			}
		}

		.uni-column {
			.item-value-camera {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
			}

			//显示上传图片
			.image-box {
				width: 31%;
				height: 90px;
				border: 1px solid #ccc;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 2%;
				margin-bottom: 2.5%;
				position: relative;

				&:nth-of-type(3n) {
					margin-right: 0;
				}

				uni-image {
					width: 100%;
					height: 100%;
				}

				.closeImg {
					//带_的是微信小程序的样式
					position: absolute;
					top: -6px;
					right: -6px;
					width: 16px;
					height: 16px;
					background: red;
					border-radius: 50%;
					line-height: 13px;
					text-align: center;

					&:before {
						content: '×';
						color: #fff;
					}
				}
			}
		}

		.uni-report {
			width: 520rpx;
			height: 80rpx;
			background: linear-gradient(to right, #ee625f, #ae0909);
			border-radius: 80rpx;
			position: absolute;
			left: 120rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 52rpx;
				height: 52rpx;
				margin-right: 20rpx;
			}
		}

		.pending_buttons {
			display: flex;
			justify-content: space-between;

			button {
				margin: 0;
				flex: 1;
				color: #fff;
				border-radius: 48rpx;
				background: #ee625f;

				&::after {
					border: none;
				}
			}
		}
	}
</style>
